<html>
<head>
<link type="text/css" rel="stylesheet" href="fonts-min.css" />
<script type="text/javascript" src="jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="jquery.simplemodal.1.4.1.min.js" ></script>
<script type="text/javascript" src="raphael-min.js"></script>
<script type="text/javascript" src="jsphylosvg-min.js?1.29" ></script>
<link rel="stylesheet" type="text/css" href="unitip.css" >
<script type="text/javascript" src="unitip.js"></script> 
</head>
<script>
function newfunc(){
			var obj=(document.getElementById("input")).value;
			/*if(obj[0]!='(')
				{
				alert("error in the code");
				return false;
				}*/
			var dataObject = {phyloxml: obj,filesource :true};
			console.debug(dataObject);
            phylocanvas = new Smits.PhyloCanvas(
                dataObject,
                'svgCanvas',
                800, 800,
				'circular'
			);
			init();
    return false;
	};

</script>
<body>
<div id ="header" style="padding:2 2 2 20;margin:15px;border-radius:20px;background-color:grey;font:white;"><h2>Demo jsPhylo</h2></div>
<div><form>
 <textarea style="height:100px;width:500px">
 (((Espresso:2,(Milk Foam:2,Espresso Macchiato:5,((Steamed Milk:2,Cappuccino:2,(Whipped Cream:1,Chocolate Syrup:1,Cafe Mocha:3):5):5,Flat White:2):5):5):1,Coffee arabica:0.1,(Columbian:1.5,((Medium Roast:1,Viennese Roast:3,American Roast:5,Instant Coffee:9):2,Heavy Roast:0.1,French Roast:0.2,European Roast:1):5,Brazilian:0.1):1):1,Americano:10,Water:1);
 </textarea>
</form></div>

<div style="display:none"><form>
 <textarea id ="input">
<phyloxml xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.phyloxml.org" xsi:schemaLocation="http://www.phyloxml.org http://www.phyloxml.org/1.10/phyloxml.xsd">
<phylogeny rooted="false">
<render>
<parameters>
<circular>
<bufferRadius>0.5</bufferRadius>
</circular>
<rectangular>
<alignRight>1</alignRight>
<bufferX>300</bufferX>
</rectangular>
</parameters>
<charts>
<group type="integratedBinary" thickness="10"/>
<component type="binary" thickness="10"/>
<content type="bar" fill="#666" width="0.2"/>
</charts>
<styles>
<caffeine fill="#A93" stroke="#DDD"/>
<base fill="#8b7100" stroke="#DDD"/>
<other fill="#333" stroke="#DDD"/>
<high fill="#666" stroke="#DDD"/>
<mid fill="#999" stroke="#DDD"/>
<low fill="#CCC" stroke="#DDD"/>
<none fill="#FFF" stroke="#CCC"/>
<barChart fill="#333" stroke-width="0"/>
<markgroupA fill="#000" stroke="#000" opacity="0.7" label="PEETS" labelStyle="sectorHighlightText"/>
<markgroupB fill="#000" stroke="#000" opacity="0.7" label="STARBUCKS" labelStyle="sectorHighlightText"/>
<sectorHighlightText font-family="Verdana" font-size="9" font-weight="bold" fill="#FFFFFF" rotate="90"/>
<ncategory fill="#eeeeee" stroke="#eeeeee" type="radialGradient">
<stop offset="0%" style="stop-color:#eeeeee; stop-opacity:0"/>
<stop offset="93%" style="stop-color:#eeeeee; stop-opacity:1"/>
<stop offset="100%" style="stop-color:#dddddd; stop-opacity:1"/>
</ncategory>
<sweet fill="#d7e3bc" stroke="#d7e3bc" type="radialGradient">
<stop offset="0%" style="stop-color:#d7e3bc; stop-opacity:0"/>
<stop offset="93%" style="stop-color:#d7e3bc; stop-opacity:1"/>
<stop offset="100%" style="stop-color:#BED192; stop-opacity:1"/>
</sweet>
<rich fill="#f1e6a8" stroke="#f1e6a8" type="radialGradient">
<stop offset="0%" style="stop-color:#f1e6a8; stop-opacity:0"/>
<stop offset="93%" style="stop-color:#f1e6a8; stop-opacity:1"/>
<stop offset="100%" style="stop-color:#E3D378; stop-opacity:1"/>
</rich>
<bold fill="#e5bd94" stroke="#e5bd94" type="radialGradient">
<stop offset="0%" style="stop-color:#e5bd94; stop-opacity:0"/>
<stop offset="93%" style="stop-color:#e5bd94; stop-opacity:1"/>
<stop offset="100%" style="stop-color:#D1A373; stop-opacity:1"/>
</bold>
<highlight_ncategory fill="#F3F3F3" stroke="#EEEEEE"/>
<highlight_sweet fill="#EBF2DA" stroke="#d7e3bc"/>
<highlight_bold fill="#e8cdb1" stroke="#e5bd94"/>
</styles>
</render>
<clade>
<clade>
<branch_length>1.0</branch_length>
<clade>
<branch_length>1.0</branch_length>
<clade>
<name bgStyle="bold">Espresso</name>
<branch_length>2.0</branch_length>
<annotation>
<desc>Base of many coffees</desc>
<uri>http://en.wikipedia.org/wiki/Espresso</uri>
</annotation>
<chart>
<component>base</component>
<acidity label="test">high</acidity>
<content>100</content>
<group>none</group>
</chart>
</clade>
<clade>
<branch_length>5.0</branch_length>
<clade>
<name bgStyle="ncategory">Milk Foam</name>
<branch_length>2.0</branch_length>
<annotation>
<desc>Nice froth</desc>
<uri>http://en.wikipedia.org/wiki/Milk_Foam</uri>
</annotation>
<chart>
<component>other</component>
<acidity>low</acidity>
<content>0</content>
<group>none</group>
</chart>
</clade>
<clade>
<name bgStyle="sweet">Espresso Macchiato</name>
<branch_length>5.0</branch_length>
<annotation>
<desc>Tight Espresso</desc>
<uri>http://en.wikipedia.org/wiki/Espresso_Macchiato</uri>
</annotation>
<chart>
<component>caffeine</component>
<acidity>high</acidity>
<content>80</content>
<group>none</group>
</chart>
</clade>
<clade>
<branch_length>5.0</branch_length>
<clade>
<name bgStyle="ncategory">Flat White</name>
<branch_length>2.0</branch_length>
<annotation>
<desc>No Heartburn please</desc>
<uri>http://en.wikipedia.org/wiki/Flat_White</uri>
</annotation>
<chart>
<component>caffeine</component>
<acidity>mid</acidity>
<content>60</content>
<group>none</group>
</chart>
</clade>
<clade>
<branch_length>5.0</branch_length>
<clade>
<name bgStyle="ncategory">Steamed Milk</name>
<branch_length>2.0</branch_length>
<annotation>
<desc>Don't burn it now</desc>
<uri>http://en.wikipedia.org/wiki/Steamed_Milk</uri>
</annotation>
<chart>
<component>other</component>
<acidity>none</acidity>
<content>0</content>
<group>none</group>
</chart>
</clade>
<clade>
<name bgStyle="sweet">Cappuccino</name>
<branch_length>2.0</branch_length>
<annotation>
<desc>Ah, a classic</desc>
<uri>http://en.wikipedia.org/wiki/Cappuccino</uri>
</annotation>
<chart>
<component>caffeine</component>
<acidity>mid</acidity>
<content>50</content>
<group>none</group>
</chart>
</clade>
<clade>
<branch_length>5.0</branch_length>
<clade>
<name bgStyle="highlight_ncategory">Whipped Cream</name>
<branch_length>1.0</branch_length>
<annotation>
<desc>Sweet tooth?</desc>
<uri>http://en.wikipedia.org/wiki/Whipped_Cream</uri>
</annotation>
<chart>
<component>other</component>
<acidity>none</acidity>
<content>0</content>
<group>markgroupB</group>
</chart>
</clade>
<clade>
<name bgStyle="highlight_ncategory">Chocolate Syrup</name>
<branch_length>1.0</branch_length>
<annotation>
<desc>What's next?</desc>
<uri>http://en.wikipedia.org/wiki/Chocolate_Syrup</uri>
</annotation>
<chart>
<component>other</component>
<acidity>none</acidity>
<content>0</content>
<group>markgroupB</group>
</chart>
</clade>
<clade>
<name bgStyle="highlight_sweet">Cafe Mocha</name>
<branch_length>3.0</branch_length>
<annotation>
<desc>Where's my coffee?</desc>
<uri>http://en.wikipedia.org/wiki/Cafe_Mocha</uri>
</annotation>
<chart>
<component>caffeine</component>
<acidity>low</acidity>
<content>20</content>
<group>markgroupB</group>
</chart>
</clade>
</clade>
</clade>
</clade>
</clade>
</clade>
<clade>
<name bgStyle="bold">Coffee arabica</name>
<branch_length>0.1</branch_length>
<annotation>
<desc>Old-timer</desc>
<uri>http://en.wikipedia.org/wiki/Coffee_arabica</uri>
</annotation>
<chart>
<component>base</component>
<acidity>high</acidity>
<content>70</content>
<group>none</group>
</chart>
</clade>
<clade>
<branch_length>1.0</branch_length>
<clade>
<name bgStyle="rich">Columbian</name>
<branch_length>1.5</branch_length>
<annotation>
<desc>Traditional</desc>
<uri>http://en.wikipedia.org/wiki/Columbian_Coffee</uri>
</annotation>
<chart>
<component>base</component>
<acidity>high</acidity>
<content>70</content>
<group>none</group>
</chart>
</clade>
<clade>
<branch_length>5.0</branch_length>
<clade>
<name bgStyle="bold">Heavy Roast</name>
<branch_length>0.1</branch_length>
<annotation>
<desc>I taste like the bean</desc>
<uri>http://en.wikipedia.org/wiki/Heavy_Roast</uri>
</annotation>
<chart>
<component>base</component>
<acidity>high</acidity>
<content>65</content>
<group>none</group>
</chart>
</clade>
<clade>
<name bgStyle="bold">French Roast</name>
<branch_length>0.2</branch_length>
<annotation>
<desc>Cigarette, anyone?</desc>
<uri>http://en.wikipedia.org/wiki/French_Roast</uri>
</annotation>
<chart>
<component>caffeine</component>
<acidity>high</acidity>
<content>60</content>
<group>none</group>
</chart>
</clade>
<clade>
<name bgStyle="bold">European Roast</name>
<branch_length>1.0</branch_length>
<annotation>
<desc>Smooth</desc>
<uri>http://en.wikipedia.org/wiki/European_Roast</uri>
</annotation>
<chart>
<component>caffeine</component>
<acidity>mid</acidity>
<content>50</content>
<group>none</group>
</chart>
</clade>
<clade>
<branch_length>2.0</branch_length>
<clade>
<name bgStyle="highlight_bold">Medium Roast</name>
<branch_length>1.0</branch_length>
<annotation>
<desc>A little bit of both</desc>
<uri>http://en.wikipedia.org/wiki/Medium_Roast</uri>
</annotation>
<chart>
<component>base</component>
<acidity>mid</acidity>
<content>40</content>
<group>markgroupA</group>
</chart>
</clade>
<clade>
<name bgStyle="highlight_bold">Viennese Roast</name>
<branch_length>3.0</branch_length>
<annotation>
<desc>Nice blend</desc>
<uri>http://en.wikipedia.org/wiki/Viennese_Roast</uri>
</annotation>
<chart>
<component>caffeine</component>
<acidity>mid</acidity>
<content>45</content>
<group>markgroupA</group>
</chart>
</clade>
<clade>
<name bgStyle="highlight_bold">American Roast</name>
<branch_length>5.0</branch_length>
<annotation>
<desc>Yanks need no caffeine</desc>
<uri>http://en.wikipedia.org/wiki/American_Roast</uri>
</annotation>
<chart>
<component>caffeine</component>
<acidity>mid</acidity>
<content>30</content>
<group>markgroupA</group>
</chart>
</clade>
<clade>
<name bgStyle="highlight_bold">Instant Coffee</name>
<branch_length>9.0</branch_length>
<annotation>
<desc>Hold your nose</desc>
<uri>http://en.wikipedia.org/wiki/Instant_Coffee</uri>
</annotation>
<chart>
<component>caffeine</component>
<acidity>low</acidity>
<content>15</content>
<group>markgroupA</group>
</chart>
</clade>
</clade>
</clade>
<clade>
<name bgStyle="bold">Brazilian</name>
<branch_length>0.1</branch_length>
<annotation>
<desc>Filter filter filter</desc>
<uri>http://en.wikipedia.org/wiki/Brazilian_Coffee</uri>
</annotation>
<chart>
<component>base</component>
<acidity>high</acidity>
<content>65</content>
<group>none</group>
</chart>
</clade>
</clade>
</clade>
<clade>
<name bgStyle="bold">Americano</name>
<branch_length>10.0</branch_length>
<annotation>
<desc>Espresso and water</desc>
<uri>http://en.wikipedia.org/wiki/Americano</uri>
</annotation>
<chart>
<component>caffeine</component>
<acidity>mid</acidity>
<content>50</content>
<group>none</group>
</chart>
</clade>
<clade>
<name bgStyle="ncategory">Water</name>
<branch_length>20.0</branch_length>
<annotation>
<desc>Solvent of Life</desc>
<uri>http://en.wikipedia.org/wiki/Water</uri>
</annotation>
<chart>
<component>other</component>
<acidity>none</acidity>
<content>0</content>
<group>none</group>
</chart>
</clade>
</clade>
</phylogeny>
</phyloxml>
</textarea>
</form></div>
<button onclick="newfunc()">click to generate tree</button>
<div id="svgCanvas"> </div>
</div>
</body>
</html>